<template>
  <maincontainer>
    <mycard>
      <n-form
          ref="formRef"
          :label-width="80"
          label-placement="left"
          :model="formValue"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="姓名:" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-button @click="handleSearch">查询</n-button>
            <n-button @click="handleResetForm">重置</n-button>
           </n-gi>
        </n-grid>
      </n-form>
    </mycard>
    <mycard class="flex-1 h-full">
      <flextable :column="column" :tabledata="tableData"></flextable>
    </mycard>
    <mycard class="w-full h-8 juzhong1">
      <fenye :total="total" @change="gettabledatafunc" ref="fenyeref"  class="juzhong1"></fenye>
    </mycard>
  </maincontainer>
</template>

<script setup name="Loginlog" lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {DefineComponent, h, inject, ref} from "vue"
import { useListIndex } from '../../../hooks/useEdit'
import {useColumns} from "../../../hooks/useColumns";
const router = useRouter()
const route = useRoute()
const {
  formRef, fenyeref, formValue, tableData, total, handleSearch,
  handleResetForm, refreshdelete,http,message,loading,
} = useListIndex()

const {index, createdTime, changeTime,desc,} = useColumns()
const column = ref([
  index,
  {title: "名称", key: "name", show: true},
  {title: "所属上级", key: "parent", show: true,render: (rowData:any,rowIndex:number)=>{
      return rowData["parent"]?rowData["parent"].name:""
    }},desc,
  createdTime,changeTime
])

// 向后台获取数据
const gettabledatafunc = () => {
}


const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {
  fenyeref.value && fenyeref.value.changeoption({page:1})
}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>


<style scoped>
</style>
